$error-3: #B31B22;
$input-border: var(--clr-table-border-color, #cccccc);
$navy-10: #EAEDEF;

.properties-group-container .property-row {
  display: block;
}

.df-property-row {
  width: 100%;
  display: inline-table;
}

.df-property-label-cell {
  width: 30%;
}

.df-property-container {
  width: 100%
}

.df-property-control {
  width: 100%;
}

.modal-body.app-properties {
  max-height: 80vh;
  overflow-y: auto;
  padding: 10px;
}

label.df-property-control {
  margin-bottom: 0px;
}

.invalid-property-value .df-form-label {
  color: $error-3;
}

.invalid-property-value .df-property-control {
  outline-color: $error-3;
  border-color: $error-3;
  color: $error-3
}

.validation-error-block {
  color: $error-3;
}

.properties {

  .line-toggle {
    background-color: var(--clr-vertical-nav-bg-color, #e8e8e8);
    height: 42px;
    line-height: 42px;
    margin-top: 4px;
    margin-bottom: 4px;
    position: relative;

    .toggle {
      display: block;
      cursor: pointer;
      position: relative;
      margin-right: 30px;
      padding-left: .6rem;
      font-weight: bold;
      color: var(--clr-global-font-color, #000);

      clr-icon {
        transform: rotate(90deg);

        &.open {
          transform: rotate(180deg);
        }
      }

      //.fa-chevron-right {
      //  top: 14px;
      //  left: 17px;
      //}
      &:hover {
        text-decoration: none;
      }
    }
  }
}

.modal-search {
  display: block;
  background-color: var(--clr-vertical-nav-bg-color, #e8e8e8);
  border-bottom: 1px solid $input-border;
  padding: 8px;

  input.form-control {
    display: block;
    border-radius: 17px;
    height: 34px;
    font-weight: normal;
    padding: 5px 15px;
  }

  span.fa {
    position: absolute;
    right: 14px;
    top: 8px;
    color: #888;
  }

  span.search-wrapper {
    display: block;
    position: relative;
  }
}

